@import (reference) 'config';

html {
  .disabled-50 {
    color: @color-disabled-50;
  }

  .disabled-100 {
    color: @color-disabled-100;
  }

  .disabled-200 {
    color: @color-disabled-200;
  }

  .disabled-300 {
    color: @color-disabled-300;
  }

  .disabled-400 {
    color: @color-disabled-400;
  }

  .disabled-500 {
    color: @color-disabled-500;
  }

  .disabled-600 {
    color: @color-disabled-600;
  }

  .disabled-700 {
    color: @color-disabled-700;
  }

  .disabled-900 {
    color: @color-disabled-900;
  }

  .basic-50 {
    color: @color-basic-50;
  }

  .basic-100 {
    color: @color-basic-100;
  }

  .basic-200 {
    color: @color-basic-200;
  }

  .basic-300 {
    color: @color-basic-300;
  }

  .basic-400 {
    color: @color-basic-400;
  }

  .basic-500 {
    color: @color-basic-500;
  }

  .basic-600 {
    color: @color-basic-600;
  }

  .basic-700 {
    color: @color-basic-700;
  }

  .basic-900 {
    color: @color-basic-900;
  }

  .info-50 {
    color: @color-info-50;
  }

  .info-200 {
    color: @color-info-200;
  }

  .info-300 {
    color: @color-info-300;
  }

  .info-400 {
    color: @color-info-400;
  }

  .info-500 {
    color: @color-info-500;
  }

  .accent-50 {
    color: @color-accent-50;
  }

  .accent-100 {
    color: @color-accent-100;
  }

  .submit-50 {
    color: @color-submit-50;
  }

  .submit-100 {
    color: @color-submit-100;
  }

  .submit-200 {
    color: @color-submit-200;
  }

  .submit-300 {
    color: @color-submit-300;
  }

  .submit-400 {
    color: @color-submit-400;
  }

  .submit-500 {
    color: @color-submit-500;
  }

  .submit-600 {
    color: @color-submit-600;
  }

  .submit-700 {
    color: @color-submit-700;
  }

  .submit-800 {
    color: @color-submit-800;
  }

  .success-50 {
    color: @color-success-50;
  }

  .success-100 {
    color: @color-success-100;
  }

  .success-300 {
    color: @color-success-300;
  }

  .success-400 {
    color: @color-success-400;
  }

  .success-500 {
    color: @color-success-500;
  }

  .success-600 {
    color: @color-success-600;
  }

  .warning-100 {
    color: @color-warning-100;
  }

  .warning-400 {
    color: @color-warning-400;
  }

  .warning-500 {
    color: @color-warning-500;
  }

  .error-100 {
    color: @color-error-100;
  }

  .error-200 {
    color: @color-error-200;
  }

  .error-400 {
    color: @color-error-400;
  }

  .error-500 {
    color: @color-error-500;
  }

  .error-600 {
    color: @color-error-600;
  }

  .error-700 {
    color: @color-error-700;
  }

  .margin-auto {
    margin-left: auto;
    margin-right: auto;
  }
}

@margin-step: 10px;
@margin-step-phone: @margin-step / 2;

.margin-classes(@margin-step) {

  .margin-05 {
    margin-bottom: @margin-step / 2;
  }

  .margin-1 {
    margin-bottom: @margin-step;
  }

  .margin-2 {
    margin-bottom: @margin-step * 2;
  }

  .margin-3 {
    margin-bottom: @margin-step * 3;
  }

  .margin-4 {
    margin-bottom: @margin-step * 4;
  }

  .margin-5 {
    margin-bottom: @margin-step * 5;
  }

  .margin-6 {
    margin-bottom: @margin-step * 6;
  }

  .margin-top-1 {
    margin-top: @margin-step;
  }

  .margin-top-2 {
    margin-top: @margin-step * 2;
  }

  .margin-top-3 {
    margin-top: @margin-step * 3;
  }

  .margin-top-4 {
    margin-top: @margin-step * 4;
  }

  .margin-top-5 {
    margin-top: @margin-step * 5;
  }

  .margin-top-6 {
    margin-top: @margin-step * 6;
  }

  .margin-right-1 {
    margin-right: @margin-step;
  }

  .margin-right-2 {
    margin-right: @margin-step * 2;
  }

  .margin-right-3 {
    margin-right: @margin-step * 3;
  }

  .margin-right-4 {
    margin-right: @margin-step * 4;
  }

  .margin-right-5 {
    margin-right: @margin-step * 5;
  }

  .margin-right-6 {
    margin-right: @margin-step * 5;
  }
}

.margin-classes(@margin-step);

@media screen and (max-width: 480px) {
  .margin-classes(@margin-step-phone);
}
